<template>
  <v-app dark>
    <v-app-bar :clipped-left="clipped" fixed app>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
      <!-- <v-btn icon @click.stop="miniVariant = !miniVariant">
          <v-icon
              >mdi-{{
                  `chevron-${miniVariant ? 'right' : 'left'}`
              }}</v-icon
          >
      </v-btn> -->
      <!-- <v-btn icon @click.stop="clipped = !clipped">
          <v-icon>mdi-application</v-icon>
      </v-btn> -->
      <!-- <v-btn icon @click.stop="fixed = !fixed">
          <v-icon>mdi-minus</v-icon>
      </v-btn> -->
      <v-toolbar-title v-text="title" />
      <v-spacer />
      <!-- <v-btn icon @click.stop="rightDrawer = !rightDrawer">
          <v-icon>mdi-menu</v-icon>
      </v-btn> -->
    </v-app-bar>
    <v-navigation-drawer
      v-model="drawer"
      :mini-variant="miniVariant"
      :clipped="clipped"
      fixed
      app
    >
      <v-list>
        <v-list-item
          v-for="(item, i) in items"
          :key="i"
          :to="item.to"
          router
          exact
        >
          <v-list-item-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title v-text="item.title" />
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-content>
      <v-container>
        <nuxt />
      </v-container>
    </v-content>
    <!--        <v-navigation-drawer-->
    <!--            v-model="rightDrawer"-->
    <!--            :right="right"-->
    <!--            temporary-->
    <!--            fixed-->
    <!--        >-->
    <!--            <v-list>-->
    <!--                <v-list-item @click.native="right = !right">-->
    <!--                    <v-list-item-action>-->
    <!--                        <v-icon light> mdi-repeat </v-icon>-->
    <!--                    </v-list-item-action>-->
    <!--                    <v-list-item-title-->
    <!--                        >Switch drawer (click me)</v-list-item-title-->
    <!--                    >-->
    <!--                </v-list-item>-->
    <!--            </v-list>-->
    <!--        </v-navigation-drawer>-->
    <v-footer :fixed="fixed" app>
      <span>&copy; 2019</span>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      clipped: true,
      drawer: false,
      fixed: false,
      items: [
        {
          icon: 'mdi-apps',
          title: '首页',
          to: '/'
        },
        {
          icon: 'mdi-chart-bubble',
          title: '抠图',
          to: '/inspire'
        },
        {
          icon: 'mdi-chart-bubble',
          title: '测试',
          to: '/test'
        }
      ],
      miniVariant: false,
      right: true,
      rightDrawer: false,
      title: '欢迎使用思陌抠图'
    }
  }
}
</script>
